<script lang="ts" setup>
import CNav from '@/components/CNav.vue'
import { useScript } from './reply_hook'

const { mainPost, userInfo, content, reply, goBack } = useScript()
</script>

<template>
  <view class="container">
    <CNav left-text="返回" @left-click="goBack" title="回复" />
    <view class="message-container">
      <uv-col span="2">
        <view class="profile-section">
          <uv-avatar
            :src="mainPost.avatar"
            size="40"
            style="border-radius: 50%; width: 50px; height: 50px"
          />
          <uv-line class="line" direction="col" length="70%" color="#888"></uv-line>
        </view>
      </uv-col>
      <uv-col span="10">
        <view class="content-section">
          <view class="user-info">
            <span class="user-name">{{ mainPost.nickname }}</span>
            <span class="time-info">{{ mainPost.createtime }}</span>
          </view>
          <view class="message-text">{{ mainPost.content }}</view>
          <view class="reply-info">
            <span
              >Replying to <a href="#">{{ mainPost.username }}</a></span
            >
          </view>
        </view>
      </uv-col>
    </view>

    <view class="reply-container">
      <view class="userInfo">
        <uv-row custom-style="margin-bottom: 10px">
          <uv-col span="2">
            <view class="reply-userinfo">
              <uv-avatar
                :src="userInfo!.avatar"
                size="40"
                style="border-radius: 50%; width: 50px; height: 50px"
              />
            </view>
          </uv-col>
          <uv-col span="10"> {{ userInfo!.nickname }}</uv-col>
        </uv-row>
      </view>
      <view class="input">
        <uv-textarea
          v-model="content"
          class="content"
          placeholder="请输入回复内容"
          maxlength="140"
          surround-border="none"
          height="200px"
        ></uv-textarea>
      </view>
      <view class="bottom_action">
        <uv-row justify="center">
          <uv-col span="8">
            <uv-text type="info" text="分享你的感受，让生活更有温度。"></uv-text>
          </uv-col>
          <uv-col span="3">
            <view class="demo-layout bg-purple-light"
              ><uv-button type="primary" shape="circle" text="发布动态" @click="reply"></uv-button
            ></view>
          </uv-col>
        </uv-row>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #fff;
  .message-container {
    display: flex;
    padding: 8px;

    .profile-section {
      margin-right: 8px;
      text-align: center;
      align-items: center;
      .line {
        margin-left: 12.5px !important;
      }
    }

    .content-section {
      padding-top: 10px;
      flex: 1;

      .user-info {
        display: flex;
        align-items: center;

        .user-name {
          font-weight: bold;
          margin-right: 4px;
        }

        .user-handle,
        .time-info {
          color: #888;
          margin-right: 4px;
        }
      }

      .message-text {
        margin: 4px 0;
        font-size: 16px;
      }

      .reply-info {
        margin-top: 10px;
        color: #888;

        a {
          color: #007bff;
          text-decoration: none;
        }
      }
    }
  }

  .reply-container {
    padding: 10px;
    padding-top: 0px;
    display: flex;
    flex-direction: column;
    justify-self: space-between;
    height: 100%;
    .userInfo {
      height: 60px;
    }
    .input {
      flex-grow: 1;
      .content {
        border: none !important;
      }
    }
    .bottom_action {
      height: 50px;
    }
  }
}
</style>
